function challenges_list(){
    $.ajax({
        url: "http://127.0.0.1/api/fake/",
        type: "GET",
        datatype: "json",
        success: function(data) {
            if (data.length == 0) {
                alert("Can't get data from server");
            }
            $.each(data.results, function(key, value){
                var $out_div = $("<div />", {
                    "class": "out-div pure-u-1-1",
                });
                var $base_div = $("<div />", {
                    "class": "base-div",
                });
                $base_div.css("margin", "0 auto")
                $base_div.css("width", "43%")
                $base_div.css("border-radius", "50px")
                $base_div.css("height", "200px")
                var $title_div = $("<div />", {
                    "class": "title-div",
                });
                var $title_text = $("<p />", {
                    "class": "title-text",
                    "text": value["name"]
                });
                $title_text.css("font-size", "24px")
                $title_text.css("font-weight", "bold")
                $title_text.css("padding-top", "20px")
                var $sponser_div = $("<div />", {
                    "class": "sponser-div",
                });
                $sponser_div.css("position", "relative")
                var $sponser_p = $("<p />", {
                    "class": "sponser-p",
                });
                var $details_div = $("<div />", {
                    "class": "details-div",
                });
                var $description_div = $("<div />", {
                    "class": "description-div",
                    "text": value["description"]
                });
                $description_div.css("width", "90%")
                $description_div.css("color", "gray")
                var $images_div = $("<div />", {
                    "class": "images-div",
                });
                $images_div.css("float", "left")
                var $images_content = $("<img />", {
                    "class": "images-content",
                    "src": value["imageUrl"],
                });
                $images_content.css("width", "180px");
                $images_content.css("height", "180px");
                $images_content.css("border-radius", "50%");
                $images_content.css("padding", "10px 10px 10px 10px");
                var $read_more = $("<div />", {
                    "class": "read-more-div",
                });
                var $read_a = $("<a />", {
                    "class": "read-more-a",
                    "href": "http://127.0.0.1/api/details/",
                    "text": "Read More"
                });
                
                $sponser_div.append($sponser_p)
                $read_a.css("color", "#FB423A")
                $read_a.css("text-decoration", "none")
                $read_more.append($read_a)
                $read_more.css("margin-top", "30px")
                $title_div.append($title_text)
                $details_div.append($title_div)
                $details_div.append($description_div)
                $details_div.append($read_more)
                $details_div.append($sponser_div)
                $images_div.append($images_content)
                $base_div.append($images_div)
                $base_div.append($details_div)
                $base_div.css("background", "white")
                $out_div.append($base_div)
                $(".challenges-list").append($out_div)
            });
        },
        error: function(data) {
        }
    });
}
